<template>
  <div class="root">
    <navigationBar/>
    <div class="context">
      <div class="order-list">
        <div class="orders-container" v-for="(item, index) in orderL" :key="index">
          <div class="folding-order" @click="jumpOrderDetail(item.oid)">
            <img class="folding-img" :src="item.productPreview.pimgLink"/>
            <div class="folding-text">
              <div class="folding-title">{{ item.productPreview.pdec }}</div>
              <div class="folding-price">实付款: {{ item.price}}元</div>
              <div>创建日期: {{ formatDate(item.createDate) }}</div>
              <div>订单状态: {{ orderStatus[item.status] }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'OrderList',
  data() {
    return {
      orderL: [],
      orderStatus: ['待支付', '运输中', '已收货', '已取消']
    }
  },
  methods: {
    jumpOrderDetail(oid) {
      this.$router.push('./orderdetail?oid=' + oid)
    },
    formatDate(date) {
      if (!date) return '';
      const d = new Date(date);
      return d.toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai' });
    }
  },
  beforeCreate() {
    this.globalData.User.loadInfo()
  },
  beforeMount() {
    if(this.globalData.User.Token === '' || this.globalData.User.Token === null) {
      this.$router.push({name: 'Connect'})
    }
    axios.get(this.globalData.apiURL + '/order/list', {
      headers: {
        Authorization: this.globalData.User.Token
      }
    })
      .then(res => {
        this.orderL = res.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>

<style scoped>
.context {
  margin-top: 55px;
}
.folding-order {
  border: 2px solid rgb(1, 1, 1);
  margin: 10px auto;
  display: flex;
  width: 1200px;
}
.folding-img {
  width: 160px;
  margin: 5px 50px 5px 5px;
}
.folding-text {
  margin: 5px 5px 5px 10px;
}
.folding-title {
  margin-bottom: 20px;
}
</style>
